<template>
 <div class="indexTable bgWhite productType" id="article_manage" ref="content">
   <el-form ref="form" class="pb_form">
      <el-select  v-model="searchForm.title.value" placeholder="文章标题" filterable clearable  @keyup.enter.native="getTableList" @focus="getTitleList" >
        <el-option v-for="item in titleList" :key="item.id" :value="item.value" :label="item.label"></el-option>
      </el-select>
      <el-select  v-model="searchForm.first_type.value" placeholder="一级类型"  clearable  @keyup.enter.native="getTableList" @focus="getFirstTypeList" >
        <el-option v-for="item in firstTypeList" :key="item.id" :value="item.value" :label="item.label"></el-option>
      </el-select>
      <el-select  v-model="searchForm.tag_type.value" placeholder="标签类型" filterable clearable  @keyup.enter.native="getTableList" @focus="getTagTypeList" >
        <el-option v-for="item in tagTypeList" :key="item.id" :value="item.value" :label="item.label"></el-option>
      </el-select>
      <el-select  v-model="searchForm.status.value" placeholder="启用状态" clearable  @keyup.enter.native="getTableList" @focus="getFirstTypeList" >
        <el-option v-for="item in statusList" :key="item.id" :value="item.value" :label="item.label"></el-option>
      </el-select>
      <el-select  v-model="searchForm.is_top.value" placeholder="置顶状态" clearable  @keyup.enter.native="getTableList" @focus="getFirstTypeList" >
        <el-option v-for="item in setStateList" :key="item.id" :value="item.value" :label="item.label"></el-option>
      </el-select>
      <el-input v-model="searchForm.create_name.value" placeholder="创建人" clearable  @keyup.enter.native="getTableList"> </el-input>
    </el-form>
    <div class="btnContainer" ref="btn">
      <div>
        <el-button type="search" @click="closeAddDialog" v-if="$_has('/article_manage/add')">添加</el-button>
        <el-button type="del" @click="sureCloseDialog('tag')" v-if="$_has('/article_manage/set_tag')">标签</el-button>
        <el-button type="del" @click="sureCloseDialog('del')" v-if="$_has('/article_manage/del')">删除</el-button>
        <el-button type="del" @click="closeExportDialog()" v-if="$_has('/article_manage/export')">导出</el-button>
        <!-- <el-button type="del" @click="closeExportDialog()" v-if="$_has('/site/export')">导出</el-button> -->
      </div>
      <div>
        <el-button type="search" @click="getTableList" v-if="$_has('/article_manage/list')">查询</el-button>
        <el-button type="del" @click="resetForm">重置</el-button>
      </div>
    </div>
    <el-table :data="listTable" :height="tableH" :row-class-name="rowClassName" ref="table" @row-click="RowClick"
     @selection-change="handleSelectionChange" :row-key="function(row){return row.id}"  v-loading="loading">
      <el-table-column type="selection" width="64"  fixed="left" :reserve-selection="true"></el-table-column>
      <el-table-column  label="文章标题" width="400" align="left"  prop="title"></el-table-column>
      <el-table-column  label="一级类型" width="200"   prop="first_type"></el-table-column>

      <el-table-column  label="链接" width="400" align="left"  prop="link"></el-table-column>
      <el-table-column  label="标签类型" width="200"  prop="tag_type"></el-table-column>
      <el-table-column  label="查看数量" width="200"  prop="view_num"></el-table-column>
      <el-table-column  label="收藏数量" width="200"  prop="collect_num"></el-table-column>
      <el-table-column  label="点赞数量" width="200"  prop="thumb_up_num"></el-table-column>
      <el-table-column  label="评论数量" width="200"  prop="comment_num"></el-table-column>
      <el-table-column  label="启用状态" width="128"  >
        <template slot-scope="scope" >
          <el-switch  v-model="scope.row.statusBoolean"  @change="handleSwitch(scope.row)" :disabled="!$_has('/article_manage/status_switch')"></el-switch>
        </template>
      </el-table-column>
      <el-table-column  label="置顶状态" width="128"  >
        <template slot-scope="scope" >
          <el-switch  v-model="scope.row.is_top_status"  @change="handleSwitchIsTop(scope.row)" :disabled="!$_has('/article_manage/is_top_switch')"></el-switch>
        </template>
      </el-table-column>
      <el-table-column  label="创建时间" width="200"   prop="create_time"></el-table-column>
      <el-table-column  label="更新时间" width="200"   prop="update_time"></el-table-column>

      <el-table-column  label="创建人" width="120" prop="create_name"></el-table-column>
      <el-table-column  label="操作" fixed="right"  width="160" class-name="options">
        <template slot-scope="scope" >
          <i class="iconfont  icon-edit_normal"  v-if="$_has('/article_manage/edit')" @click.stop.prevent="setCurRow(scope.row, 'edit')"></i> 
          <i class="iconfont  icon-discount_normal"  v-if="$_has('/article_discount_product/edit')" @click.stop.prevent="setCurRow(scope.row, 'discount')"></i>  
          <i class="iconfont  icon-product"  v-if="$_has('/article_product/edit')" @click.stop.prevent="setCurRow(scope.row, 'product')"></i>  

          <i class="iconfont  icon-delete_normal" v-if="$_has('/article_manage/del')" @click.stop.prevent="setCurRow(scope.row, 'del')" ></i>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination ref="pagination" background :page-sizes="pageSizes" :total="total"  :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"  @size-change="handleSizeChange" :current-page="page"
      @current-change="handleCurrentChange"></el-pagination>
    <Add v-show="addShow" :show="addShow" @closeDialog="closeAddDialog"></Add>
    <Edit v-show="editShow" :id="curId" :show="editShow" @closeDialog="closeEditDialog"></Edit>
    <Del v-show="delShow" :idList="curList" :show="delShow" @closeDialog="closeDelDialog"></Del>
    <Tag v-show="tagShow" :idList="curList" :show="tagShow" @closeDialog="closeTagDialog"></Tag>
    <Export v-show="exportShow" :show="exportShow" @closeDialog="closeExportDialog"></Export>
    <DiscountProduct v-show="discountShow" :id="curId" :show="discountShow" @closeDialog="closeDiscountShowDialog"></DiscountProduct>

   <Product v-show="productShow" :id="curId" :show="productShow" @closeDialog="closeProductShowDialog"></Product>

    
 </div>
</template>

<script>
import { articleManageList, articleManageStatus, articleManageIsTop, articleManageTitle } from '@/api/article/article_manage.js'
import { firstTypeList } from '@/api/article/article_type.js'
import { setSearchParams } from '@/utils/index.js'
import { Add, Edit, Del, Tag, Export, DiscountProduct, Product} from './components'
import { tagTypeList } from '@/api/article/article_tag_type.js'
export default {
    name: 'article_manage',

  data () {
    return {
      searchForm: {
        title: { value: '', op: '=' },
        first_type: { value: '', op: '=' },
        tag_type: { value: '', op: 'like' },
        status: { value: '', op: '=' },
        is_top: { value: '', op: '=' },
        create_name: {value: '', op: 'like'},

      },
    
      listTable: [  ],
      pageSizes: [20, 50, 100],
      total: 10,
      pageSize: 20,
      page: 1,
      addShow: false,
      editShow: false,
      delShow: false,
      tagShow: false,
      exportShow: false,
      discountShow: false,
      productShow: false,
      tableH: null,
      curList: [],
      firstTypeList: [],
      statusList: [
        {value: 1, label: '启用'},
        {value: 2, label: '禁用'},
      ],
      setStateList: [
        {value: 1, label: '置顶'},
        {value: 2, label: '未置顶'},
      ],
      titleList: [],
      tagTypeList: [],
    }
  },
  components: { Add, Edit, Del, Tag, Export, DiscountProduct, Product},
  mounted(){
    let that = this;
    that.setTableHeight()
    // 注：window.onresize只能在项目内触发1次
    window.onresize = function windowResize () {
        // 通过捕获系统的onresize事件触发我们需要执行的事件
      that.setTableHeight()
    }
  },
  created () {
    this.getTableList()
  },
  methods: {
    getTagTypeList () {
      tagTypeList().then(res=>{
        this.tagTypeList = res.data
      })
    },
    getTitleList () {
      articleManageTitle().then(res=>{
        this.titleList = res.data
      })
    }, 
    handleSwitch(row){
      let params = {
        id: row.id,
        status: ""
      }
      if(row.statusBoolean){
        params.status = 1
      }else{
        params.status = 2
      }
      articleManageStatus(params).then(res=>{
        this.$message.success('启用状态调整' + res.message)
      })
    },
    handleSwitchIsTop(row){
      let params = {
        id: row.id,
      }
      if(row.is_top_status){
        params.is_top = 1
      }else{
        params.is_top = 2
      }
      articleManageIsTop(params).then(res=>{
        this.$message.success('置顶状态调整' + res.message)
      })
    },
    closeDiscountShowDialog () {
      this.discountShow = !this.discountShow
    },
    closeExportDialog(){
      this.exportShow = !this.exportShow
      if(!this.exportShow){
        this.getTableList()
      }
    },
    closeTagDialog(){
      this.tagShow = !this.tagShow
      if(!this.tagShow){
        this.getTableList()
      }
    },
    sureCloseDialog(type){
      if(this.curList.length > 0){
        if(type == 'del'){
          this.closeDelDialog()
        } else if (type == 'tag'){
          this.closeTagDialog()
        }
      } else {
        let word = "删除"
        if(type == 'tag'){
          word = '标签'
        }
        this.$message.error('请选择需' + word + '的选项！')
      }
      
    },
    rowClassName({row}){
      let rowClass = "tableRowClass"
      if(row.statusSelection){
        rowClass += ' selectRow'
      }
      if(!row.statusBoolean){
        rowClass += ' unchecked'
      }
      return rowClass
    },
    setCurRow(row, type) {
      this.curList = []
      this.curList.push(row.id)
      this.curId = row.id
      if(type == 'edit'){ 
        this.closeEditDialog()  
      }else if(type == 'del'){
        this.closeDelDialog()
      }else if (type == 'discount'){ 
        this.closeDiscountShowDialog()
      } else if (type == 'product'){ 
        this.closeProductShowDialog()
      } 
      
    },
    RowClick (row) {
      this.$refs.table.toggleRowSelection(row);
    } ,
    handleSelectionChange(list){
      let array = []
      for(let i = 0; i < list.length; i++ ){
        array.push(list[i].id)
      }
      this.curList = array
      // 选中行的样式赋值
      for(let i in this.selectList){
        this.selectList[i].statusSelection = false
      }
      for (let item in list){
        list[item].statusSelection = true
      }
      this.selectList = list
    },
    getTableList(){
      this.loading = true
      let params = setSearchParams(this.searchForm, this.pageSize, this.page)
      // 发请求的位置
      articleManageList(params).then(res=>{
          let list = res.data.data
        if( list.length == 0 && this.page > 1){
          this.page -= 1
          this.getTableList()
        }
        let  idList = []
        for(let i = 0; i < list.length; i++){
          if(list[i].status == 1) {
            list[i].statusBoolean = true
          } else {
            list[i].statusBoolean = false
          }

          if(list[i].is_top == 1) {
            list[i].is_top_status = true
          } else {
            list[i].is_top_status = false
          }
          idList.push(list[i].id)
        }
        this.curIdList = idList

        this.listTable = list
        this.total = res.data.total
        this.page = res.data.current_page
        this.$refs.table.clearSelection()
        this.loading = false
      })
    },
    closeProductShowDialog () {
      this.productShow = !this.productShow
      if(!this.productShow){
        this.getTableList()
      }
    },
    closeAddDialog(){
      this.addShow = !this.addShow
      if(!this.addShow){
        this.getTableList()
      }
    },
    closeEditDialog(){
      this.editShow = !this.editShow
      if(!this.editShow){
        this.getTableList()
      }
    },
    closeDelDialog(){
      this.delShow = !this.delShow
      if(!this.delShow){
        this.getTableList()
      }
    },
   
    getFirstTypeList(){
      firstTypeList().then(res=>{
        this.firstTypeList = res.data
      })
    },
    setTableHeight(){
      let searchFormH = this.$refs.form.$el.offsetHeight;
      let manageMenuH = this.$refs.content.offsetHeight;
      let btnContainerH = this.$refs.btn.offsetHeight;
      let paginationH = this.$refs.pagination.$el.offsetHeight
      let tableHeight = manageMenuH  - btnContainerH - searchFormH - paginationH - 48 - 24 - 24
      this.tableH = tableHeight +'px' 
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getTableList()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getTableList()
      this.$refs.table.clearSelection()
    },
    resetForm(){
      for(let item in this.searchForm){
        this.searchForm[item].value =""
      }
      this.getTableList()
    },
  }

}
</script>

<style lang="scss">
@import '@/styles/article/article_manage.scss';
</style>